<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>工作人员个人信息</title>
    <link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/notice.css" rel="stylesheet">
    <link href="/end/css/element/index.css" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }

        td{
            vertical-align: middle!important;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 头部-->
    <div style="width: 100%; height: 60px;line-height: 60px;background-color: #333333">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div style="color: #b3d8ff;font-size: 20px;">电动甄选</div>
                </div>
                <div class="col-md-4" style="text-align: right;color: #EEEEEE;"v-if="user.name">
                    <span style="color: #b3d8ff;margin-right: 20px;">{{user.name}}</span>
                    <a style="color: #EEEEEE" href="javascript:void (0)"@click="logout">退出</a>

                </div>
                <div v-else class="col-md-4"style="text-align: right;">
                    <a style="color: #EEEEEE;margin-right: 10px;" href="/end/page/login.html" target="_blank">登录</a>
                    <a style="color: #EEEEEE" href="/end/page/register.html" target="_blank">注册</a>

                </div>
            </div>
        </div>
    </div>

    <!--导航-->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%;height: 50px;line-height: 50px">
            <div class="col-md-12">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a> </li>
                        <li class="nav-item"><a href="noticeInfo.html">公告</a> </li>
                        <li class="nav-item"><a href="videoInfo.html">新能源介绍</a> </li>
                        <li class="nav-item"><a href="richTextInfo.html">汽车详细信息</a> </li>
                        <li class="nav-item"><a href="messageInfo.html">论坛</a> </li>
                        <li class="nav-item"><a href="cartInfo.html">购物车</a> </li>
                        <li class="nav-item"><a href="orderInfo.html">订单</a> </li>
                        <li class="nav-item"><a href="commentInfo.html">评价</a> </li>
                        <li class="nav-item active"><a href="javascript:void(0);"@click="personalPage">个人信息</a> </li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--主题开始-->
    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        工作人员个人信息表
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <input type="hidden" id="id" name="id" v-model="entity.id">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名" id="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">昵称</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.nickName" placeholder="请输入昵称" id="nickName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">性别</label>
                                <div class="col-sm-7">
                                    <label class="radio-inline">
                                        <input type="radio" value="男" v-model="entity.sex" id="sex">男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" value="女" v-model="entity.sex" id="sex">女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">年龄</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄" id="age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">生日</label>
                                <div class="col-sm-7">
                                    <div class="block">
                                        <el-date-picker v-model="entity.birthday" id="birthday" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">手机号</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.phone" placeholder="请输入手机号" id="phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">地址</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.address" placeholder="请输入地址" id="address">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">邮箱</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.email" placeholder="请输入邮箱" id="email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">身份证</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" v-model="entity.cardId" placeholder="请输入身份证" id="cardId">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">账户余额</label>
                                <div class="col-sm-7" style="line-height: 35px;">
                                    ￥{{entity.account}}
                                </div>
                            </div>
                        </form>
                        <div style="text-align: center">
                            <button type="button" class="btn btn-primary"data-toggle="modal"data-target="#rechargeModal" @click="account=100">充值</button>
                            <button type="button" class="btn btn-primary" @click="update()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--充值模态框-->
    <div class="modal" tabindex="-1" id="rechargeModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">充值</span>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <input type="hidden" name="id" v-model="entity.id">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">金额</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="account" placeholder="请输入充值金额">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="recharge()">确定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/swiper-5.4.5/swiper.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="/end/js/my.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script src="/end/js/element/index.js"></script>
<script>
    function personalPage() {
        let user = JSON.parse(localStorage.getItem("user"));
        if (!user) {
            alert('请登录');
        }
        if (user && user.level && user.level === 1) {
            window.location = '/front/accountAdminInfo.html';
        }
        if (user && user.level && user.level === 2) {
            window.location = '/front/accountWorkerInfo.html';
        }
        if (user && user.level && user.level === 3) {
            window.location = '/front/accountUserInfo.html';
        }
    }
    new Vue({
        el:'#wrapper',
        data:{
            user: {},
            isShow: false, //是否显示进入后台管理
            objs: [],    //查询的列表
            entity: {
                sex: '男'
            },
            account: 0, //充值进入
        },
        created: function (){
            axios.get("/auth").then(res =>{
               if(res.data.code==='0'){
                   this.user = res.data.data;
                   if (this.user.level !== 3){
                       this.isShow = true;
                   }
                   this.loadData();
               }else {
                   alert("请先登录");
                   location.href = "/end/page/login.html";
               }
            });

        },

        methods:{
            logout(){
                axios.get("/logout").then(res =>{
                    if(res.data.code==='0'){
                        location.href ='/front/index.html'
                    }
                });
            },

            //查询用户信息
            loadData(){
                axios.get("/getAccountInfo").then(res =>{
                    if (res.data.code ==='0'){
                        this.entity =res.data.data;

                    }else {
                        alert(res.data.msg);
                    }
                });
            },

            //新增或修改后提交到后台
            update(){
                if (checkValid(this.entity)){
                    axios.put("/workerInfo",this.entity).then(res =>{
                        if (res.data.code === '0'){
                            alert("更新成功");
                            this.loadData();
                        } else {
                            alert(res.data.msg);
                        }
                    });
                }
            },
            //充值
            recharge(){
                let data = {id: this.entity.id,account: parseFloat(this.entity.account) + parseFloat(this.account)};
                axios.put("/workerInfo",data).then(res =>{
                    if (res.data.code === '0'){
                        alert("充值成功");
                        $("#rechargeModal").modal("hide");
                        this.loadData();
                    } else {
                        alert(res.data.msg);
                    }
                });
            }
        }
    });
</script>
</body>
</html>